import {
  Keyboard,
  StyleSheet,
  Text,
  TextInputProps,
  TouchableWithoutFeedback,
  View,
} from 'react-native';
import React, {
  Dispatch,
  SetStateAction,
  useEffect,
  useRef,
  useState,
} from 'react';
import {SearchBar, SearchBarProps} from '@rneui/themed';
import PageBack from '../../components/Back';
import SvgBili from '../../assets/svg/bilibili.svg';
import SvgArrb from '../../assets/svg/arrb.svg';
import SvgDelete from '../../assets/svg/delete.svg';
const SearchPage = () => {
  const [keyWord, setKeyWord] = useState('');
  const [showRes, setShowRes] = useState(false);
  const [historyList, setHistoryList] = useState<string[]>([]);
  const searchRef = useRef<any>();

  // 组件卸载前移除监听器
  const updateSearch = (search: React.SetStateAction<string>) => {
    if (search === '') {
      setShowRes(false);
    }
    setKeyWord(search);
  };
  useEffect(() => {
    searchRef.current.focus();
  }, []);
  const search = () => {
    setShowRes(false);
    if (keyWord === '') return;
    setShowRes(true);
    setHistoryList([...historyList, keyWord]);
  };
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: '#fff',
        paddingLeft: 10,
        paddingRight: 10,
      }}>
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
        <View>
          <PageBack />
        </View>
        <View style={{flex: 1, position: 'relative'}}>
          <SearchBar
            ref={searchRef}
            value={keyWord}
            onSubmitEditing={search}
            onChangeText={updateSearch}
            onClear={() => {
              setShowRes(false);
            }}
            returnKeyLabel="搜索"
            containerStyle={{
              backgroundColor: '#fff',
              width: '100%',
              borderColor: '#fff',
              borderTopWidth: 0,
              borderBottomWidth: 0,
            }}
            inputContainerStyle={{
              backgroundColor: '#fff',
              borderStyle: 'solid',
              borderWidth: 1,
              borderColor: '#333',
              borderRadius: 30,
              borderBottomColor: '#333',
              borderBottomWidth: 1,
              paddingRight: 40,
              height: 30,
            }}
            inputStyle={{
              fontSize: 14,
            }}></SearchBar>
          <View
            style={{
              position: 'absolute',
              top: 12,
              right: 20,
              borderLeftColor: '#333',
              borderLeftWidth: 1,
              borderStyle: 'solid',
              paddingLeft: 10,
            }}>
            <SvgBili width={20} height={20}></SvgBili>
          </View>
        </View>
        <TouchableWithoutFeedback onPress={search}>
          <View>
            <Text>搜索</Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
      {showRes ? (
        <ResList />
      ) : (
        <HotSearch
          historyList={historyList}
          delList={() => {
            setHistoryList([]);
          }}></HotSearch>
      )}
    </View>
  );
};
const ResList = () => {
  return (
    <>
      <Text>搜索到的结果</Text>
    </>
  );
};
const HotSearch = ({
  historyList,
  delList,
}: {
  historyList: string[];
  delList: () => void;
}) => {
  const [showMoreHistory, setShowMoreHistory] = useState(false);
  return (
    <View>
      <Text>热搜</Text>
      <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
        <Text style={{color: '#303133'}}>历史记录</Text>
        <View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
          <TouchableWithoutFeedback onPress={delList}>
            <SvgDelete width={15} height={15}></SvgDelete>
          </TouchableWithoutFeedback>
          <View
            style={{
              height: 15,
              width: 1,
              backgroundColor: '#333',
              marginLeft: 10,
              marginRight: 10,
            }}></View>
          <TouchableWithoutFeedback
            onPress={() => {
              setShowMoreHistory(!showMoreHistory);
            }}>
            <SvgArrb
              style={{transform: showMoreHistory ? [{rotate: '180deg'}] : ''}}
              width={15}
              height={15}></SvgArrb>
          </TouchableWithoutFeedback>
        </View>
      </View>
      <View
        style={[
          {
            flexDirection: 'row',
            flexWrap: 'wrap',
            marginTop: 10,
            overflow: 'hidden',
          },
          {height: showMoreHistory ? 'auto' : 70},
        ]}>
        {historyList.map((item, index) => (
          <View
            key={index}
            style={{
              height: 25,
              borderRadius: 5,
              paddingLeft: 20,
              paddingRight: 20,
              marginRight: 10,
              marginBottom: 10,
              backgroundColor: '#EBEEF5',
            }}>
            <Text style={{color: '#606266', fontSize: 12, lineHeight: 25}}>
              {item}
            </Text>
          </View>
        ))}
      </View>
    </View>
  );
};
export default SearchPage;

const styles = StyleSheet.create({});
